<template>
  <div class="card">
    <a-form-model layout="inline" >
      <a-form-model-item >
      <a-button @click="showeditWechatmessage()">新建</a-button>
      </a-form-model-item>
      <a-form-model-item >
      <a-button @click="delWechatmessageArrs()">批量删除</a-button>
      </a-form-model-item>
      <a-form-model-item >
      <a-button @click="addEdit()">同步品牌</a-button>
      </a-form-model-item>
    </a-form-model >
    
    <a-spin :spinning="loading" style="padding-top: 10px;">
      <a-table
        bordered
        :filterMultiple="true"
        :rowSelection="{onChange:onChanges}"
        :columns="columns"
        :data-source="tableData"
        :rowKey="(record, index) => index"
        :pagination="pagination"
        @change="pagination=$event,getDataList()"
      >
        <span slot="image" slot-scope="text">
          <viewer :images="[text]">
            <img width="50px" height="50px" :src="text" alt="" />
          </viewer>
        </span>
        <span slot="tags" slot-scope="text">
          <a-tag color="#87d068" v-if="text==0">图片</a-tag>
          <a-tag color="#2db7f5" v-if="text==1">视频</a-tag>
        </span>
        <span slot="operate" slot-scope="text, record">
          <a-button type="link" @click="showeditWechatmessage(record)">编辑</a-button>
          <a-button type="link" @click="delWechatmessage(record)">删除</a-button>
        </span>
      </a-table>
    </a-spin>
    <editWechatmessage ref="editWechatmessage" @changes="getDataList"></editWechatmessage>
  </div>
</template>

<script>
import { getWechatmessageListApi,delWechatmessageListApi } from '@/api/brand.js'
import editWechatmessage from "./diogla/editWechatmessage.vue"
export default {
  name: 'banner',
  components: {
    editWechatmessage
  },
  data() {
    return {
      loading: false,
      selectedArrIds:[],
      tableData: [],
      pagination:{
        total:0,
        current:1,
        pageSize:50,
      },
      columns: [
        {
          title: '#',
          dataIndex: 'id',
          align: 'center'
        },
        {
          title: '类型',
          dataIndex: 'type',
          align: 'center',
          scopedSlots: { customRender: 'tags' }
        },
        {
          title: '文字内容',
          dataIndex: 'content',
          align: 'center',
        },
        {
          title: '图片',
          dataIndex: 'image_url',
          align: 'center',
          scopedSlots: { customRender: 'image' }
        },
        {
          title: '视频',
          dataIndex: 'video_url',
          align: 'center',
        },
        {
          title: '创建时间',
          dataIndex: 'ctime',
          align: 'center',
        },
        {
          title: '操作',
          align: 'center',
          scopedSlots: { customRender: 'operate' }
        }
      ]
    }
  },
  created() {
    this.getDataList()
  },
  computed:{
  },
  methods: {
    onChanges(selectedRowKeys, selectedRows){
      console.log(selectedRows)
      selectedRows.forEach(element => {
          this.selectedArrIds.push(element.id)
      });
    },
    showeditWechatmessage(jsons){
      this.$refs.editWechatmessage.openeditWechatmessage(jsons)
    },
    delWechatmessage(item){
      var that=this
      this.$confirm({
        title: '确认删除吗？',
        content: '此操作不可撤回',
        okText: '确认',
        onOk() {
          that.delMessages([item.id])
        },
      });
    },
    delWechatmessageArrs(){
      var that=this
      if(that.selectedArrIds.length>0){
        this.$confirm({
        title: '确认删除吗？',
        content: '此操作不可撤回',
        okText: '确认',
        onOk() {
          that.delMessages(that.selectedArrIds)
        },
      });
      }else{
        this.$message.info('请先选中至少一行数据');
      }
    },
    delMessages(ids){
      delWechatmessageListApi({ids:ids,
        brand_id: process.env.VUE_APP_BRAND_ID}).then(res=>{
          this.$message.success("操作成功");
        this.getDataList()
      })
    },


    async getDataList() {
      this.loading = true
      this.selectedArrIds=[]
      try {
        var json={
          order: "desc",
          order_by: "id",
          page:  this.pagination.current,
          page_size:  this.pagination.pageSize,
          search:{
            brand_id:process.env.VUE_APP_BRAND_ID
          }
        }
        const { data } = await getWechatmessageListApi(json)
        this.tableData = data.list
        this.pagination.total = data.total
      } finally {
        this.loading = false
      }
    },
  }
}
</script>

<style lang="less" scoped>
.card {
  padding: 20px;
  background-color: #fff;
}
</style>
